Computers are frequently used to edit information. Two types of editors are frequently used to edit information. A graphics editor displays graphical objects and text and allows an author to edit the graphical information using a graphical user interface to indicate the desired effect of any change. By contrast, a text editor displays text, and an author may edit the text using text based commands. However, if text is used as source code for graphics, it can be desirable to use a graphics editor and a text editor.
Some application programs, such as the conventional Dreamweaver 2 program formerly commercially available from Macromedia Corporation of San Francisco, Calif. allow authors to edit graphical source code for one or more web pages using both a graphics editor and a text editor that are linked to one another.
The conventional Dreamweaver application program provides each editor using two separate windows that can be displayed simultaneously: a graphics window containing the graphics editor and a code window containing the code editor. The author may click on an object in the graphics window, and graphically manipulate it, for example, by moving it, or manipulate it using a graphical user interface including menus and dialog boxes to change attributes for the object. The author may also add new objects into the graphics window using the graphics editor. If the author desires, the author may move the mouse cursor to the code window, where the source code for the web page is displayed, and directly adjust the source code for the web page using a text editor. Such an arrangement allows an author to use the more intuitive graphical window and see results of edits instantly, while retaining the power and flexibility to adjust the code directly. As an author makes changes to the graphics window, the code window is automatically updated and vice versa.
While the dual window approach is superior to requiring an author to choose between graphically manipulating the web page or text editing the code and then using only one type of editor, it suffers from several drawbacks. First, to make the code and graphics windows sufficiently large enough to display enough information at one time, the windows may overlap each other on the author's display screen. Although parts of both windows may always be visible, the author may only be able to view one or the other window in its entirety. If the portion of the code window that corresponds to the graphics window currently being edited is hidden behind the graphics window, the author must move one or both windows to allow the author to view the portion of the code window corresponding to the portion of the graphics window being edited. Thus, the convenience of the approach can seem less than ideal.
Second, authors may find it cumbersome to move between the windows. To edit the source code for an object in the code window, the author must move the mouse over the code window and click into it. Furthermore, if the author wishes to edit the code in the code window for an object that is not yet selected in that window, the author must either select it in the graphics window (in which case the corresponding code is scrolled into the code window if it was not visible) and then move to the code window, or the author must locate the code in the code window and click the mouse cursor over it. Either approach is cumbersome.
Third, although the author is allowed to insert code directly into the code window, little help is provided to the author to instruct the author what tags or attributes would be proper at the location of the cursor.
What is needed is a method and system that can allow information to be edited both graphically and textually, provides a more intuitive approach than other methods, can help prevent errors in the code, and can assist an author with selecting proper code.